<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期阶段圆环图</title>
    <script src="./echart.js"></script>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.18);
            margin: 20px auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .chart-container {
            width: 100%;
            height: 500px;
            margin: 30px 0;
        }
        
        #chart {
            width: 100%;
            height: 100%;
        }
        
        .description {
            margin-top: 30px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            line-height: 1.7;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.25);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .feature-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            font-size: 2rem;
            color: #ff7e5f;
        }
        
        .stage-info {
            margin-top: 10px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .controls {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: white;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(255, 126, 95, 0.4);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 126, 95, 0.6);
        }
        
        .btn i {
            font-size: 1.2rem;
        }
        
        .footer {
            margin-top: 40px;
            text-align: center;
            font-size: 0.9rem;
            opacity: 0.7;
            width: 100%;
            padding: 20px;
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            .subtitle {
                font-size: 1rem;
            }
            
            .chart-container {
                height: 400px;
            }
            
            .container {
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .chart-container {
                height: 350px;
            }
            
            .features {
                grid-template-columns: 1fr;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-circle-notch"></i> 生命周期可视化</h1>
            <p class="subtitle">使用ECharts创建的圆环图展示人类生命周期各个阶段，支持交互和自定义显示</p>
        </header>
        
        <div class="chart-container">
            <div id="chart"></div>
        </div>
        
        <div class="description">
            <h3><i class="fas fa-info-circle"></i> 图表说明：</h3>
            <p>此圆环图展示了人类生命周期的八个主要阶段。每个阶段在圆环中等比例显示，悬停在各个区域上可以查看详细信息。圆环图的设计使得每个生命阶段之间的关系一目了然，从婴幼儿时期到长寿老年，展示了完整的人生旅程。</p>
        </div>
        
        <div class="features">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-baby"></i>
                </div>
                <h3>婴幼儿期</h3>
                <p class="stage-info">0-2岁，快速生长发育阶段</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-child"></i>
                </div>
                <h3>学龄前儿童</h3>
                <p class="stage-info">3-5岁，认知能力快速发展</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-user-graduate"></i>
                </div>
                <h3>学龄儿童</h3>
                <p class="stage-info">6-12岁，正式接受教育阶段</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-user"></i>
                </div>
                <h3>青年</h3>
                <p class="stage-info">13-35岁，个人发展和独立阶段</p>
            </div>
        </div>
        
        <div class="controls">
            <button class="btn" id="resetBtn">
                <i class="fas fa-sync"></i> 重置视图
            </button>
            <button class="btn" id="downloadBtn">
                <i class="fas fa-download"></i> 下载图表
            </button>
        </div>
    </div>
    
    <div class="footer">
        <p>© 2023 生命周期可视化 | 基于ECharts 5.4.3 | 响应式设计</p>
    </div>

    <script>
        // 初始化图表
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 颜色配置
        const colors = [
            '#FF9A9E', '#4facfe', '#0cebeb', '#f6d365',
            '#a6c0fe', '#d4fc79', '#d299c2', '#96e6a1'
        ];
        
        // 生命周期数据
        const lifeStages = [
            { name: '婴幼儿', age: '0-2岁', icon: 'fa-baby' },
            { name: '学龄前儿童', age: '3-5岁', icon: 'fa-child' },
            { name: '学龄儿童', age: '6-12岁', icon: 'fa-user-graduate' },
            { name: '青年', age: '13-35岁', icon: 'fa-user' },
            { name: '中年', age: '36-59岁', icon: 'fa-user-tie' },
            { name: '年轻老年', age: '60-74岁', icon: 'fa-user-friends' },
            { name: '老年', age: '75-89岁', icon: 'fa-user-alt' },
            { name: '长寿老年', age: '90岁+', icon: 'fa-user-injured' }
        ];
        
        // 图表配置
        const option = {
            title: {
                text: '人生阶段分布',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 24,
                    fontWeight: 'bold'
                },
                subtext: '人类生命周期八个主要阶段',
                subtextStyle: {
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 16
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    const stage = lifeStages.find(s => s.name === params.name);
                    return `
                        <div style="text-align:center;">
                            <b>${params.name}</b><br>
                            年龄范围: ${stage.age}<br>
                            占比: ${params.percent}%
                        </div>
                    `;
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderColor: 'rgba(255,255,255,0.3)',
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                orient: 'horizontal',
                bottom: 10,
                textStyle: {
                    color: '#fff'
                },
                data: lifeStages.map(s => s.name)
            },
            series: [
                {
                    name: '生命周期',
                    type: 'pie',
                    radius: ['35%', '65%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 8,
                        borderColor: '#1a2a6c',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}',
                        color: 'rgba(255,255,255,0.9)',
                        fontSize: 14,
                        fontWeight: 'bold'
                    },
                    labelLine: {
                        show: true,
                        length: 15,
                        length2: 5,
                        smooth: true
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 16,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: lifeStages.map((stage, index) => ({
                        value: 1,
                        name: stage.name,
                        itemStyle: {
                            color: colors[index]
                        }
                    }))
                }
            ]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
        
        // 重置视图
        document.getElementById('resetBtn').addEventListener('click', function() {
            myChart.dispatchAction({
                type: 'legendUnSelect',
                name: 'all'
            });
            
            setTimeout(() => {
                myChart.dispatchAction({
                    type: 'legendSelect',
                    name: 'all'
                });
            }, 500);
        });
        
        // 下载图表
        document.getElementById('downloadBtn').addEventListener('click', function() {
            const url = myChart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#1a2a6c'
            });
            
            const link = document.createElement('a');
            link.href = url;
            link.download = '生命周期圆环图.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>